<%--
  Created by IntelliJ IDEA.
  User: kurong
  Date: 2021/10/12
  Time: 19:18
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品名称</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/res/layui/css/layui.css" media="all">

    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/generalMerchandise.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/product.css">

    <script type="text/javascript" src="${pageContext.request.contextPath}/res/jquery/jquery-3.5.1.js"></script>

    <script type="text/javascript" src="${pageContext.request.contextPath}/res/layui/layui.js" charset="utf-8"></script>

    <script>
        $(document).ready(function () {
            $(".product-seckill-wrap").hide();
            // $(".product-seckill-wrap").click(function(){
            //     $(this).hide();
            // });
        });
    </script>

    <style>

        body {
            font: 12px/150% tahoma, arial, Microsoft YaHei, Hiragino Sans GB, "\u5b8b\u4f53", sans-serif;
            -webkit-font-smoothing: antialiased;
            color: #666;
            background: #fff;
        }

        .layui-nav .layui-nav-item {
            line-height: 40px;
        }

        .layui-bg-cyan {
            background-color: #010101 !important;
        }

        .layui-nav .layui-nav-item a {
            padding: 0 40px;
        }

        .layui-carousel[lay-arrow=always] .layui-carousel-arrow {
            opacity: 1;
            left: 0px;
            margin-top: -18px;
        }

        .layui-carousel:hover .layui-carousel-arrow[lay-type=add], .layui-carousel[lay-arrow=always] .layui-carousel-arrow[lay-type=add] {
            right: 0px;
        }

        .option-color {
            line-height: 40px;
        }

        .layui-tab-card > .layui-tab-title .layui-this {
            background-color: #e4393c;
            color: #fff;
            cursor: default;
        }


        .layui-tab-card > .layui-tab-title {
            /*width: 100%;*/
            background-color: #FAFAFA;
            border-bottom: 1px solid #e4393c;
        }

        .layui-tab-card > .layui-tab-title li {
            margin-right: 0;
            margin-left: 0;
            width: 120px;
        }

        .layui-tab-card {
            border-width: 0;
            min-height: 220px;
            display: table;
        }

        .layui-tab-title .layui-this:after {
            border: none;
        }

        .layui-tab-card {
            box-shadow: none;
        }

        .layui-tab-content {
            display: table;
            padding: 10px 0;
        }

        .layui-tab-title {
            width: 988px;

        }

        .layui-carousel-arrow {
            border-radius: 0;
            background-color: white;
            color: black;
        }

        .layui-carousel > [carousel-item] > * {
            background-color: white;
        }

        .into-cart a:hover {
            color: #FF0036;
        }

        .buy-now a:hover {
            color: #fff;
        }

        span, div, a {
            caret-color: transparent;
        }

        .buy-num {
            caret-color: black;

        }

        .layui-layer-btn {
            background-color: #f8f8f8;
        }

        .layui-layer-btn .layui-layer-btn0 {
            border-color: #ff0036;
            background-color: #ff0036;
        }

        .p-news {
            /*margin: 0 auto;*/
            text-align: center
        }

        .p-news img {
            max-width: 988px;
        }

        .product-img img {
            width: 450px;
            height: 450px;
        }


        .seckilling {
            background: url(//static.360buyimg.com/item/unite/1.0.137/components/default-soa/prom/i/seckilling.jpg) no-repeat #fe0851;
        }

        .activity-banner {
            height: 32px;
            line-height: 32px;
            padding: 0 10px;
            overflow: hidden;
            zoom: 1;
        }

        .activity-type {
            float: left;
        }

        .seckilling .sprite-seckilling {
            background-image: url(//static.360buyimg.com/item/unite/1.0.137/components/default-soa/prom/i/__sprite.png);
            background-position: -20px 0;
        }

        .activity-banner i {
            display: inline-block;
        }

        .seckill .sprite-seckill, .seckilling .sprite-seckilling {
            width: 20px;
            height: 20px;
            vertical-align: -4px;
            margin-right: 5px;
        }

        .seckilling .activity-type strong {
            color: #fff;
        }

        .seckill-yg .activity-type strong {
            color: #e4393c;
        }

        .activity-type strong {
            font-size: 16px;
            /*color: #ffe134;*/
            font-weight: 400;
        }

        .seckilling .activity-message {
            color: #fbe2e2;
            font-size: 12px;
            float: right;
        }

        .seckilling .activity-message span {
            font-size: 14px;
            color: #fff;
            width: 22px;
            background: #443b3b;
            line-height: 24px;
            margin: 0 4px;
            border-radius: 2px;
            display: inline-block;
            text-align: center;
        }

        .seckill-yg {
            background: url(//static.360buyimg.com/item/unite/1.0.137/components/default-soa/prom/i/seckill.png) no-repeat #f0f0f0;
        }

        .activity-price {
            float: left;
            padding: 0 10px;
        }

        .activity-price span, .activity-price strong {
            font-size: 16px;
            color: #666;
            font-weight: 400;
        }

        .activity-price span, .activity-price strong {
            font-size: 16px;
            color: #666;
            font-weight: 400;
        }

        .activity-price span {
            padding-left: 10px;
        }

        .seckill-yg .activity-message {
            color: #999;
            font-size: 12px;
        }

        .seckill-yg .sprite-seckill-yg {
            width: 20px;
            height: 20px;
            background-image: url(//static.360buyimg.com/item/unite/1.0.137/components/default-soa/prom/i/__sprite.png);
            background-position: 0 0;
            vertical-align: -4px;
            margin-right: 5px;
        }

        .seckill-yg .activity-message {
            color: #999;
            font-size: 12px;
        }

        .activity-message span {
            font-size: 14px;
            color: #fff;
            display: inline-block;
            width: 22px;
            line-height: 24px;
            text-align: center;
            background: #999;
            margin: 0 4px;
            border-radius: 2px
        }

        .activity-message {
            float: right;
        }

        .haha #search-2014 .text {
            height: 36px;


    </style>

</head>
<body style="height: 100%">

<!--最上面的导航-->
<jsp:include page="../common/header.jsp" flush="true"/>
<!--主体部分 -- 头部导航下面盒子：logo + 搜索 + 购物车 -->
<div class="cms_header" id="cms_header" style="min-height: 100px">
    <div class="w haha">
        <!--左边部分-->
        <div id="logo-2014">
            <a href="" class="logo">树懒</a>
            <div class="extra">
                <div id="channel">手机</div>
                <div id="xialakuang">
                    <ul class="nav">
                        <li class="first-menu">
                            <a href="">全部分类</a>
                            <ul class="second-nav">
                                <li><a href="">华为</a></li>
                                <li><a href="">小米</a></li>
                                <li><a href="">OPPO</a></li>
                            </ul>
                            <ul class="second-nav">
                                <li><a href="">荣耀</a></li>
                                <li><a href="">红米</a></li>
                                <li><a href="">vivo</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <!--搜索部分-->
        <div id="search-2014">
            <ul class="hide" id="shelper"></ul>
            <div class="form">
                <input type="text" class="text" id="key">
                <button class="button cw_icon">
                    <i></i>
                    搜索
                </button>
            </div>
        </div>


        <!--右边购物车-->
        <div id="settleup-2014" class="dorpdown">
            <a class="cart-href" href="${pageContext.request.contextPath}/customer/login.jsp">
                <%--            <a class="cart-href" href="" target="_blank">--%>

                <div class="cw_icon">
                    <i class="ci-left"></i>
                    <i class="ci_right">></i>
                    <span class="gocart">我的购物车</span>
                </div>
            </a>
        </div>
        <div id="hotwords"></div>
        <span class="clr"></span>
    </div>
</div>


<div class="shop-head">
<%--    <img src="${pageContext.request.contextPath}/images/productDetailsImg/top.jpg"/>--%>
    <div>
        <ul class="layui-nav layui-bg-cyan">
            <li class="layui-nav-item"><a href="${pageContext.request.contextPath}/product/generalMerchandise.jsp"
                                          target="_blank">首页</a></li>
            <li class="layui-nav-item">
                <a href="javascript:;">全部分类</a>
                <dl class="layui-nav-child">
                    <dd><a href="">移动模块</a></dd>
                    <dd><a href="">后台模版</a></dd>
                    <dd><a href="">电商平台</a></dd>
                </dl>
            </li>

            <li class="layui-nav-item"><a href="">OPOO</a></li>
            <li class="layui-nav-item"><a href="">IQOO</a></li>
            <li class="layui-nav-item"><a href="">荣耀</a></li>
            <li class="layui-nav-item"><a href="">小米</a></li>
            <li class="layui-nav-item"><a href="">realme</a></li>
            <li class="layui-nav-item"><a href="">一加</a></li>
            <li class="layui-nav-item"><a href="">关于我们</a></li>
        </ul>
    </div>

</div>

<div class="product-address">
    <ul class="address-iitem">

        <li class="item-first">手机</li>
        <li class="item-first sep">></li>
        <!--        <div>&gt;</div>-->
        <li class="gitem-second">一加</li>
        <li class="item-first sep">></li>

        <!--        <div>&gt;</div>-->

        <li class="item-tirdt">一加9r</li>

    </ul>
</div>
<div class="product-main">
    <!-- 左边图片 -->
    <div class="product-picture-all">
        <div class="product-img">
            <img src="${serverResponse.data.product.proImg}">
        </div>
        <div class="product-img-list">
            <div class="layui-carousel" id="test3">
                <div carousel-item="">
                    <ul class="pictures">
                        <c:forEach var="images" items="${serverResponse.data.images}" varStatus="s">
                        <c:if test="${s.count%5 == 1 &&s.count>1}">
                    </ul>
                    <ul class="pictures">

                        </c:if>
                        <li>
                                <%--                            <a> <img src="${images}" onmouseover="changeImg(${s.count})"></a>--%>
                            <a> <img src="${images}" class="proImages"></a>
                        </li>

                        </c:forEach>
                    </ul>
                </div>
            </div>
        </div>
        <!--        <div class="product-button"></div>-->
    </div>

    <!--  右边  -->
    <div class="product-text">
        <div class="product-name">${serverResponse.data.product.proDesc}</div>
        <c:set var="nowDate" value="<%=System.currentTimeMillis()%>"></c:set>
        <c:if test="${!empty seckill}">
            <c:if test="${seckill.data.secStartTime.time-nowDate > 0}">
                <%--                <span>${seckill.data.secStartTime.time}</span>--%>
                <%--    <span>未开始</span>--%>
                <div class="activity-banner  J-seckill seckill-yg" id="banner-miaosha" style="">
                    <div class="activity-type">
                        <i class="sprite-seckill-yg"></i>
                        <strong>秒杀预告</strong>
                    </div>
                    <div class="activity-price">
                        <strong class="seckill-yg-date"></strong><span>秒杀价￥${seckill.data.secPrice}</span></div>
                    <div class="activity-message message-seckill-yg">距离开始还剩<span class="_h">00</span>:<span class="_m">00</span>:<span
                            class="_s">00</span></div>
                </div>
            </c:if>
            <c:if test="${seckill.data.secStartTime.time-nowDate < 0}">
                <%--                <span>${seckill.data.secEncTime.time}</span>--%>

                <%--                    <span>已开始</span>--%>
                <div class="activity-banner  J-seckill seckilling" id="banner-miaosha" style="">
                    <div class="activity-type">
                        <i class="sprite-seckilling"></i>
                        <strong>限时秒杀</strong>
                    </div>
                    <div class="activity-price">
                    </div>
                    <div class="activity-message  message-seckilling">距离结束<span class="_h">00</span>:<span
                            class="_m">00</span>:<span class="_s">00</span></div>
                </div>

            </c:if>
        </c:if>


        <div class="product-wrap">
            <ul>

                <c:if test="${!empty seckill && seckill.data.secStartTime.time-nowDate < 0}">
                    <li class="">
                        <label class="price-name">秒 杀 价</label>
                        <span class="p-price">
                        <span class="price-sign">￥</span>
<%--                        <span class="price-num">${serverResponse.data.product.proPrice}</span>--%>
                        <span class="price-num">${seckill.data.secPrice}</span>
                            <del style="color: #999999">￥${serverResponse.data.product.proPrice}</del>
                    </span>
                    </li>
                </c:if>
                <c:if test="${(!empty seckill && seckill.data.secStartTime.time-nowDate > 0)||empty seckill}">
                    <li class="">
                        <label class="price-name">特 惠 价</label>
                        <span class="p-price">
                        <span class="price-sign">￥</span>
                        <span class="price-num">${serverResponse.data.product.proPrice}</span>
                    </span>
                    </li>
                </c:if>


                <li class="review">
                    <div class="xxx" style="width: 50px;height: 30px;">
                        <p>累计评价</p>
                        <a style="font: 14px verdana;color: #005ea7;">1万+</a>
                    </div>
                </li>

                <li>
                    <label>促&nbsp;&nbsp;销</label>
                    <span>
                        <span class="p-h1-flag">赠品</span>
                        <span class="p-h1">耳机 × 1</span>
                        <span class="p-h1-ps">（赠完即止）</span>
                        <!--                        <div class="J-gift-limit gift-limit"></div>-->
                    </span>
                </li>

                <li>
                    <label>&nbsp;</label>

                    <span class="p-text">
                        <span class="p-h1-flag">限购</span>
                        <span class="p-h1">限购5件</span>
                    </span>
                </li>

            </ul>

        </div>

    </div>
    <div class="product-choose">

        <ul class="choose-top">

            <li>
                <label>服务说明</label>
                <span>预计付款后7天内发货</span>
                <!--                    <span>0.55kg</span>-->
            </li>
            <li>
                <label>&nbsp; </label>
                <span>已满99元包邮</span>
            </li>
            <li>
                <label>&nbsp; </label>
                <span>由树懒商城提供商品、发货开票及售后服务</span>
            </li>
            <li>
                <label>重&nbsp;&nbsp;量</label>
                <span>0.55kg</span>
            </li>
        </ul>
        <ul class="choose-bottom">
            <!--            style="line-height: 40px;"-->
            <li class="option-color" style="line-height: 40px">
                <label>选择颜色</label>

                <c:forEach var="color" items="${serverResponse.data.color}">
                    <c:if test="${!(color eq serverResponse.data.product.proColor)}">
                        <div class="option color">
                            <img src="${pageContext.request.contextPath}/images/productDetailsImg/option1.jpg">
                            <i>${color}</i>
                        </div>
                    </c:if>

                    <c:if test="${color eq serverResponse.data.product.proColor}">
                        <div class="option color" style="border-color: #e3393c">
                            <img src="${pageContext.request.contextPath}/images/productDetailsImg/option1.jpg">
                            <i>${color}</i>
                        </div>
                    </c:if>
                </c:forEach>

            </li>
            <li>
                <label>选择版本 </label>

                <c:forEach var="memory" items="${serverResponse.data.memory}">
                    <c:if test="${!(memory eq serverResponse.data.product.proMemory)}">
                        <div class="option memory">
                            <i>${memory}</i>
                        </div>
                    </c:if>

                    <c:if test="${memory eq serverResponse.data.product.proMemory}">
                        <div class="option memory" style="border-color: #e3393c">
                            <i>${memory}</i>
                        </div>
                    </c:if>
                </c:forEach>


            </li>
            <li>
                <label>选择套餐</label>
                <div class="option" style="border-color: #e3393c">
                    <a>官方标配</a>
                </div>
            </li>
            <li>
                <label>增值保障</label>
                <div class="option">
                    <a>2年碎屏换屏¥179.00</a>
                </div>
                <div class="option">
                    <a>2年全保修¥275.00</a>
                </div>
            </li>

        </ul>

    </div>

    <c:if test="${!empty seckill && seckill.data.secStartTime.time-nowDate < 0}">
        <div class="finish-btn">
            <div class="choose-count">
                <input class="buy-num" value="1" data-max="1" id="shangpinshuliang" name="shangpinshuliang">
                <a class="num-reduce">-</a>
                <a class="num-add">+</a>
            </div>

            <div class="buy-now">
                <input type="hidden" value="${serverResponse.data.product.proId}" id="shangpinxinxiId"
                       name="shangpinxinxiId">

                    <%--                <c:if test="${!empty loginCustomer}">--%>
                <a id="goToSeckillOrder" class="jiesuan-btn">立即秒杀</a>


            </div>
        </div>

    </c:if>
    <c:if test="${(!empty seckill && seckill.data.secStartTime.time-nowDate > 0)||empty seckill}">
        <div class="finish-btn">
            <div class="choose-count">
                <input class="buy-num" value="1" data-max="5" id="shangpinshuliang" name="shangpinshuliang">
                <a class="num-reduce">-</a>
                <a class="num-add">+</a>
            </div>
            <div class="into-cart">
                <form class="addCartFrom" action="" method="post">
                    <input type="hidden" value="${serverResponse.data.product.proId}" id="proId" name="proId">
                    <input type="hidden" value="1" class="buy-num" id="proCount" name="proCount">
                    <input class="cartBtn" type="button" value="加入购物车">
                </form>
            </div>
            <div class="buy-now">
                <input type="hidden" value="${serverResponse.data.product.proId}" id="shangpinxinxiId"
                       name="shangpinxinxiId">


                    <a id="goToOrder" class="jiesuan-btn">立即购买</a>


            </div>
        </div>
    </c:if>


</div>
<div class="other-module">
    <div class="recommend">
        <div class="recommend-title">
            <h3>达人选购</h3>
        </div>
        <div class="recommend-product">
            <ul>
                <li>
                    <div class="c-p-img">
                        <a>
                            <img src="../images/productDetailsImg/pic1.jpg">
                        </a>
                    </div>
                    <div class="c-p-name">
                        <a>华为mate40 5G手机【支持鸿蒙HarmonyOs】 亮黑色 mate40e全网通(8G+128G)【4G版】</a>
                    </div>
                    <div class="c-p-price">
                        <strong>￥4399.00</strong>
                    </div>
                </li>
                <li>
                    <div class="c-p-img">
                        <a>
                            <img src="../images/productDetailsImg/pic1.jpg">
                        </a>
                    </div>
                    <div class="c-p-name">
                        <a>华为mate40 5G手机【支持鸿蒙HarmonyOs】 亮黑色 mate40e全网通(8G+128G)【4G版】</a>
                    </div>
                    <div class="c-p-price">
                        <strong>￥4399.00</strong>
                    </div>
                </li>
                <li>
                    <div class="c-p-img">
                        <a>
                            <img src="../images/productDetailsImg/pic1.jpg">
                        </a>
                    </div>
                    <div class="c-p-name">
                        <a>华为mate40 5G手机【支持鸿蒙HarmonyOs】 亮黑色 mate40e全网通(8G+128G)【4G版】</a>
                    </div>
                    <div class="c-p-price">
                        <strong>￥4399.00</strong>
                    </div>
                </li>
                <li>
                    <div class="c-p-img">
                        <a>
                            <img src="../images/productDetailsImg/pic1.jpg">
                        </a>
                    </div>
                    <div class="c-p-name">
                        <a>华为mate40 5G手机【支持鸿蒙HarmonyOs】 亮黑色 mate40e全网通(8G+128G)【4G版】</a>
                    </div>
                    <div class="c-p-price">
                        <strong>￥4399.00</strong>
                    </div>
                </li>
                <li>
                    <div class="c-p-img">
                        <a>
                            <img src="../images/productDetailsImg/pic1.jpg">
                        </a>
                    </div>
                    <div class="c-p-name">
                        <a>华为mate40 5G手机【支持鸿蒙HarmonyOs】 亮黑色 mate40e全网通(8G+128G)【4G版】</a>
                    </div>
                    <div class="c-p-price">
                        <strong>￥4399.00</strong>
                    </div>
                </li>
            </ul>

        </div>

    </div>
    <div class="details">

        <div class="layui-tab layui-tab-card">
            <ul class="layui-tab-title">
                <li class="layui-this">商品介绍</li>
                <li>商品评价</li>
                <!--                <li>权限分配</li>-->
                <!--                <li>商品管理</li>-->
                <!--                <li>订单管理</li>-->
            </ul>
            <div class="layui-tab-content" style="height: 100px;">
                <div class="layui-tab-item layui-show">
                    <div class="p-parameter">
                        <div class="p-brand">
                            <a>品牌: &nbsp;</a>
                            <a>华为</a>
                        </div>

                        <ul class="p-parameter-list">
                            <li title="华为Mate 40 Pro">商品名称：${serverResponse.data.product.proName}</li>
                            <li title="100022634068">商品编号：${serverResponse.data.product.proNum}</li>
                            <%--                            <li title="0.6kg">商品毛重：0.6kg</li>--%>
                            <%--                            <li title="中国大陆">商品产地：中国大陆</li>--%>
                            <li title="麒麟9000">CPU型号：${serverResponse.data.product.proCpu}</li>
                            <li title="8GB">运行内存：${serverResponse.data.product.others1}</li>
                            <li title="128GB">机身存储：${serverResponse.data.product.others2}</li>
                            <%--                            <li title="NM存储卡">存储卡：NM存储卡</li>--%>
                            <li title="后置三摄">摄像头数量：${serverResponse.data.product.proCamera}</li>
                            <%--                            <li title="5000万像素">后摄主摄像素：5000万像素</li>--%>
                            <%--                            <li title="1300万像素">前摄主摄像素：1300万像素</li>--%>
                            <%--                            <li title="其他">分辨率：其他</li>--%>
                            <%--                            <li title="其他">屏幕比例：其他</li>--%>
                            <%--                            <li title="其他">屏幕前摄组合：其他</li>--%>
                            <%--                            <li title="10V/4A；4.5V/5A；11V/6A；5V/2A；10V/2.25A；5V/4.5A；9V/2A">--%>
                            <%--                                充电器：10V/4A；4.5V/5A；11V/6A；5V/2A；10V/2.25A；5V/4.5A；9V/2A--%>
                            <%--                            </li>--%>
                            <%--                            <li title="无线充电，快速充电，防水防尘，NFC，屏幕指纹，高倍率变焦，曲面屏，5G，3D(ToF或结构光)，屏幕高刷新率">--%>
                            <%--                                热点：无线充电，快速充电，防水防尘，NFC，屏幕指纹，高倍率变焦，曲面屏，5G，3D(ToF或结构光)，屏幕高刷新率--%>
                            <%--                            </li>--%>
                            <%--                            <li title="支持IPv6">支持IPv6：支持IPv6</li>--%>
                            <%--                            <li title="HarmonyOS 2">系统：HarmonyOS 2</li>--%>
                        </ul>

                    </div>
                    <div class="p-news" style="max-width: 988px">
                        ${introduction.data}

                    </div>

                </div>
                <div class="layui-tab-item p-review">
                    <div class="review-title">
                        <h3>商品评价</h3>
                    </div>

                    <div class="reviews">
                        <div class="review-item">

                            <div class="user-info">
                                <img src="${pageContext.request.contextPath}/images/customer/head.jpg" width="25"
                                     height="25" class="avatar"> username
                            </div>
                            <div class="review-blob">

                                <div class="review-star star3"></div>
                                <div class="blob-wrap"></div>

                                <div class="comment-message">
                                    <div class="order-info"><span>亮黑色8G+256G</span><span>【官方标配】</span>
                                        <span></span>
                                        <span></span>
                                        <span>2021-08-02 17:07</span>
                                    </div>
                                    <div class="comment-op">
                                        <a class="J-report">举报</a>
                                        <a class="J-nice"><i class="sprite-praise"></i>0</a>
                                        <a href=""><i class="sprite-comment"></i>7</a></div>
                                </div>
                            </div>
                        </div>
                        <div class="review-item">

                            <div class="user-info">
                                <img src="${pageContext.request.contextPath}/images/customer/head.jpg" width="25"
                                     height="25" class="avatar"> 王勤来
                            </div>
                            <div class="review-blob">

                                <div class="review-star star5"></div>
                                <div class="blob-wrap"></div>

                                <div class="comment-message">
                                    <div class="order-info"><span>亮白色12G+256G</span><span>【官方标配】</span>
                                        <span></span>
                                        <span></span>
                                        <span>2021-08-02 13:05</span>
                                    </div>
                                    <div class="comment-op">
                                        <a class="J-report">举报</a>
                                        <a class="J-nice"><i class="sprite-praise"></i>0</a>
                                        <a href=""><i class="sprite-comment"></i>7</a></div>
                                </div>
                            </div>
                        </div>
                        <div class="review-item">

                            <div class="user-info">
                                <img src="${pageContext.request.contextPath}/images/customer/head.jpg" width="25"
                                     height="25" class="avatar"> 王震
                            </div>
                            <div class="review-blob">

                                <div class="review-star star3"></div>
                                <div class="blob-wrap"></div>

                                <div class="comment-message">
                                    <div class="order-info"><span>深橘色8G+256G</span><span>【官方标配】</span>
                                        <span></span>
                                        <span></span>
                                        <span>2021-08-01 10:07</span>
                                    </div>
                                    <div class="comment-op">
                                        <a class="J-report">举报</a>
                                        <a class="J-nice"><i class="sprite-praise"></i>0</a>
                                        <a href=""><i class="sprite-comment"></i>7</a></div>
                                </div>
                            </div>
                        </div>
                        <div class="review-item">

                            <div class="user-info">
                                <img src="${pageContext.request.contextPath}/images/customer/head.jpg" width="25"
                                     height="25" class="avatar"> username
                            </div>
                            <div class="review-blob">

                                <div class="review-star star4"></div>
                                <div class="blob-wrap"></div>

                                <div class="comment-message">
                                    <div class="order-info"><span>乳白色8G+256G</span><span>【官方标配】</span>
                                        <span></span>
                                        <span></span>
                                        <span>2021-07-29 15:07</span>
                                    </div>
                                    <div class="comment-op">
                                        <a class="J-report">举报</a>
                                        <a class="J-nice"><i class="sprite-praise"></i>0</a>
                                        <a href=""><i class="sprite-comment"></i>7</a></div>
                                </div>
                            </div>
                        </div>
                        <div class="review-item"></div>
                        <div class="review-item"></div>
                        <div class="review-item"></div>
                    </div>

                </div>
            </div>
        </div>

    </div>
</div>
<!--下方提示信息-->
<div id="cmsfooter">
    <div id="service-2017">

        <!-- 多快好省 -->
        <div class="w hhzidingyi">
            <ol class="slogen">
                <li class="item fore1">
                    <i>多</i>
                    品类齐全，轻松购物
                </li>
                <li class="item fore2">
                    <i>多</i>
                    多仓发货，极速配送
                </li>
                <li class="item fore3">
                    <i>好</i>
                    正品行货，精致服务
                </li>
                <li class="item fore4">
                    <i>省</i>
                    天天低价，畅选无忧
                </li>
            </ol>
        </div>

        <!--下面的信息-->
        <div class="shulan-help">
            <div class="w hhzidingyi">
                <div class="tishixinxi">
                    <span class="zititishixinxi">欢迎使用树懒商城，为您提供高质量的服务，是我们商城最高的追求！</span>
                </div>
            </div>
        </div>

    </div>
</div>


<script type="text/javascript" src="${pageContext.request.contextPath}/res/layui/layui.js" charset="utf-8"></script>
<script>
    layui.use('element', function () {
        var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块

        //监听导航点击
        element.on('nav(demo)', function (elem) {
            //console.log(elem)
            layer.msg(elem.text());
        });
    });


    layui.use('carousel', function () {
        var carousel = layui.carousel;
        carousel.render({
            elem: '#test3',
            width: '100%',
            height: '100%',
            arrow: 'always',
            anim: 'default',
            indicator: 'none',
            autoplay: false
        });
    });
</script>
<script> //切换Tab
layui.use('element', function () {
    var $ = layui.jquery
        , element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块

    //触发事件
    var active = {
        tabChange: function () {
            //切换到指定Tab项
            element.tabChange('demo', '22'); //切换到：用户管理
        }
    };

    $('.site-demo-active').on('click', function () {
        var othis = $(this), type = othis.data('type');
        active[type] ? active[type].call(this, othis) : '';
    });

    //Hash地址的定位
    var layid = location.hash.replace(/^#test=/, '');
    element.tabChange('test', layid);

    element.on('tab(test)', function (elem) {
        location.hash = 'test=' + $(this).attr('lay-id');
    });

});
</script>


<script type="text/javascript" src="${pageContext.request.contextPath}/res/jquery/jquery-3.5.1.js"></script>

<%--  秒杀商品 页面变化  --%>
<script>
    $(document).ready(function () {
        if (${!empty seckill}) {
            if (${seckill.data.secStartTime.time-nowDate > 0}) {
                countTime(${seckill.data.secStartTime.time});
            } else {
                countTime(${seckill.data.secEncTime.time});
            }
        }
        $(".seckill-yg-date").text(getDate());
    });

    function getDate() {
        var fmt = "YYYY-mm-dd HH:MM";
        var date = new Date(${seckill.data.secStartTime.time});
        console.log(date);
        let ret;
        const opt = {
            "Y+": date.getFullYear().toString(),        // 年
            "m+": (date.getMonth() + 1).toString(),     // 月
            "d+": date.getDate().toString(),            // 日
            "H+": date.getHours().toString(),           // 时
            "M+": date.getMinutes().toString(),         // 分
            "S+": date.getSeconds().toString()          // 秒
            // 有其他格式化字符需求可以继续添加，必须转化成字符串
        };
        for (let k in opt) {
            ret = new RegExp("(" + k + ")").exec(fmt);
            if (ret) {
                fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
            }
            ;
        }
        ;
        return fmt;
    }

    var toTime;

    function countTime(toTime) {
        // alert(toTime);

        if (toTime != null) {
            // var enddate = new Date(timestamp);
            end = toTime;
        }

//获取当前时间
        var date = new Date();
        var now = date.getTime();

//时间差
        var leftTime = end - now;

        if (leftTime < 0) {
            // alert("已经结束了");
            window.location.reload();
        }

//定义变量 d,h,m,s保存倒计时的时间
        var d, h, m, s;
        if (leftTime >= 0) {
            h = Math.floor(leftTime / 1000 / 60 / 60 % 24);
            m = Math.floor(leftTime / 1000 / 60 % 60);
            s = Math.floor(leftTime / 1000 % 60);
        }
//将倒计时赋值到div中
        if (h < 10) {
            $("._h").text("0" + h)
// document.getElementById("_h").innerHTML = "0" + h + ":";

        } else {
            $("._h").text(h);

        }
        if (m < 10) {
            $("._m").text("0" + m);

        } else {
            $("._m").text(m);

        }
        if (s < 10) {
            $("._s").text("0" + s);

        } else {
            $("._s").text(s);

        }
//递归每秒调用countTime方法，显示动态时间效果
        setTimeout(countTime, 1000);

    }
</script>

<%--  立即秒杀按钮  --%>
<script>
    $("#goToSeckillOrder").click(function () {
        if (${seckill.data.secStock<1}){
            alertMessage("来晚了,已经卖完了?", "看看别的", "${pageContext.request.contextPath}/product/seckillhome.jsp");
        }else {
            window.location.href = "${pageContext.request.contextPath}/order/seckill_place_an_order?seckillProductId=${seckill.data.secId}";
        }

    });
</script>


<%--切换颜色和存储--%>
<script type="text/javascript">
    $(".color").click(function goByColor() {

        // this.hide();
        var proNme = "${serverResponse.data.product.proName}";
        var proColor = $(this).find('i').text();
        var proMemory = "${serverResponse.data.product.proMemory}";
        proMemory = proMemory.replace(/\+/g, "%2B");

        console.log(proNme);
        console.log(proColor);
        console.log(proMemory);
        window.location.href = 'coditions?proName=' + proNme + '&proColor=' + proColor + '&proMemory=' + proMemory;
    });
    $(".memory").click(function goByMemory() {

        // this.hide();
        var proNme = "${serverResponse.data.product.proName}";
        var proColor = "${serverResponse.data.product.proColor}";
        var proMemory = $(this).find('i').text();
        proMemory = proMemory.replace(/\+/g, "%2B");

        console.log(proNme);
        console.log(proColor);
        console.log(proMemory);
        window.location.href = 'coditions?proName=' + proNme + '&proColor=' + proColor + '&proMemory=' + proMemory;
    });

    $(".proImages").mouseover(function () {
        var src = this.src;
        document.querySelector(".product-img img").src = src;
    });
</script>



<%--  添加购物车  --%>
<script src="${pageContext.request.contextPath}/res/layui/layui.js" charset="utf-8"></script>
<script>
    //1. 提交表单
    $(".cartBtn").click(function () {
        //2. 获得表单中所有数据

            var formData = $(".addCartFrom").serialize();
            // console.log("表单数据: " + $("#custId").val());
            var url = "${pageContext.request.contextPath}/cart";
            var dataType = "json";
            //3. 产生ajax请求
            //  $.post(url,formData,"成功回调", dataType);

            $.post(
                url,
                formData,
                function (result) {
                    if (result.code==200){
                        var carturl = '${pageContext.request.contextPath}/shopcar';
                        alertMessage(result.reason, "到购物车", carturl);
                    }else {
                            var loginurl = "${pageContext.request.contextPath}/customer/login.jsp";
                            alertMessage("请先登录", "去登录", loginurl);
                    }
                },
                dataType
            );

        //4. 获得服务器返回数据: 添加成功/添加失败 消息提示

    });

    function alertMessage(message, mesBtn, gourl) {
        //示范一个公告层
        layer.open({
            type: 1,
            title: false, //不显示标题栏
            closeBtn: false,
            area: '300px;',
            shade: 0.25,
            id: 'LAY_layuipro', //设定一个id，防止重复弹出
            btn: [mesBtn, '继续浏览'],
            btnAlign: 'c',
            moveType: 1, //拖拽模式，0或者1
            // content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">你知道吗？亲！<br>layer ≠ layui<br><br> layer 只是作为 layui 的一个弹层模块，由于其用户基数较大，所以常常会有人以为 layui 是 <del>layerui</del><br><br>layer 虽然已被 Layui 收编为内置的弹层模块，但仍然会作为一个独立组件全力维护、升级 ^_^</div>'
            content: '<div style="padding: 50px; line-height: 22px; background-color: white; color: black; font-weight: 300;">' + message + '！</div>',
            success: function (layero) {
                var btn = layero.find('.layui-layer-btn');
                btn.find('.layui-layer-btn0').attr({
                    href: gourl
                    , target: '_blank'
                });
            }
        });
    };


</script>


<%-- 后面加的点击立即购买，跳转到下单页面 --%>
<script>

    // 把商品id及其对应的商品数量加入到 map 中，里面的数据只有一个
    var productIdAndCount = new Map();

    // var idAndCount =new Map();
    $("#goToOrder").click(function () {
        /* 商品id */
        var productId = parseInt(document.getElementById("shangpinxinxiId").value);
        /* 商品数量 */
        var count = parseInt(document.getElementById("shangpinshuliang").value);
        productIdAndCount.set(productId, count);
        // 将map转为object
        let obj = Object.create(null);
        for (let [k, v] of productIdAndCount) {
            obj[k] = v;
        }
        $.ajax({
            url: "${pageContext.request.contextPath}/order/place_an_order",
            data: obj,
            method: 'post',
            async: false,
            success: function (data) {
                if (data==""){
                    var loginurl = "${pageContext.request.contextPath}/customer/login.jsp";
                    alertMessage("请先登录", "去登陆", loginurl);
                }else {
                    window.location.href = "${pageContext.request.contextPath}" + data;
                }
                // console.log("成功返回的数据: " + data);

            },
            error: function (data) {
                <%--window.location.href = "${pageContext.request.contextPath}"+data.responseText;--%>
            },
        })
    })

</script>


<script src="${pageContext.request.contextPath}/js/product.js"></script>


</body>
</html>
